<template>
  <div id="vehicle-group-info">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item">
          <router-link to="/admin/settlementReportTemplates">结算单报表模板</router-link>
        </li>
      </ol>
    </nav>

    <div class="row">
      <div class="col-12">
        <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="group-info-tab"
              data-bs-toggle="tab"
              href="#templateInfo"
              >模板信息</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" id="login-tab" data-bs-toggle="tab" href="#customerInfo"
              >客户与报表模板</a
            >
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="templateInfo">
            <div class="card">
              <div class="card-body bg-light">
                注意：<span class="text-danger">模板信息不能删除，不能修改。</span>
              </div>
              <table class="table table-striped table-hover table-sm">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>模板名称</th>
                    <th>描述</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="info in templates" :key="info.id">
                    <td>{{ info.id }}</td>
                    <td>{{ info.name }}</td>
                    <td>{{ info.desc }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="tab-pane fade show" id="customerInfo">
            <settlement-report-template
              :templates="templates"
            ></settlement-report-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import SettlementReportTemplate from "./settlement-report-template-customer.vue";

import { searchReportTemplates } from "@/api/admin";

export default {
  components: {
    SettlementReportTemplate,
  },
  data() {
    return {
      templates: [
        { id: 1, name: "通用模板一", desc: "美运通模板0" },
        { id: 2, name: "通用模板二", desc: "承起自动化模板0" },
        { id: 3, name: "通用模板三", desc: "汽车模板0" },
      ],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.search();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchReportTemplates((v) => {
        console.log(v);
        this.templates = v.dataList;
      });
    },
  },
};
</script>
